// 瀑布流2
<template>
  <div ref="root" class="waterfall">
    <!-- <div class="slot-box">
      <slot name="left" />
      <slot name="right" />
    </div> -->
    <div class="waterfall__left"><div
      v-for="(item, index) in colNodes1"
      :key="index"
      class="waterfall__left__item"
    >
      <feed-item :item="item" />
    </div></div>

    <div class="waterfall__right">
      <div
        v-for="(item, index) in colNodes2"
        :key="index"
        class="waterfall__right__item"
      >
        <feed-item :item="item" />
      </div>
    </div>

  </div>
</template>

<script>
import FeedItem from './FeedItem.vue'

export default {
  components: {
    FeedItem
  },
  props: {
    // 列数
    cols: {
      type: Number,
      default: 2
    },
    // 数据列表
    dataList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      colNodes1: [], // 第一列的元素
      colNodes2: [] // 第二列的元素
    }
  },
  mounted() {
    this.createColItem()
  },

  methods: {
    // 获取列表中的元素并将其分别存入数组
    createColItem() {
      const dataList = this.dataList
      console.log(dataList)
      const num = Math.ceil(dataList.length / 2)
      let arr = dataList.map((item, index, array) => {
        if (index < 2) {
          return array.slice(index * num, (index + 1) * num)
        }
      })
      arr = arr.filter(item => item)
      this.colNodes1.push(...arr[0])
      this.colNodes2.push(...arr[1])
      console.log(this.colNodes1, this.colNodes2)
    }
  }
}
</script>

<style lang="less">
.waterfall {
  margin-top: 24px;
  padding: 24px 24px 24px 24px;
  background: #f0f0f0;
  border-radius: 24px 24px 0px 0px;
  display: flex;
  justify-content: space-around;
  &__left {
    width: 50%;
  }
  &__right {
    width: 50%;
    margin-left: 14px;
  }
}
</style>
